<template>
	<view class="head-s">
		<view class="top-view"></view>
		<view class="head-top">
			<view class="status_bar"></view>
			<view class="head">
				<view class="left icon">
					<image v-if="!isBack" @click="showDrawer" type="primary" src="../static/icons/menu.png" mode=""></image>
					<image v-else @click="goBack()" src="../static/icons/back-icon.png" mode=""></image>
				</view>
				<view class="centers">
					<view class="center" v-if="title===''">
						<text class="amount">{{this.$store.state.sum.toFixed(4)}}</text>
						<text>ZHB</text>
					</view>
					<view class="title" v-else>
						<text class="amount">{{title}}</text>
					</view>
				</view>
				<view class="right icon">
					<image src="../static/icons/find.png" mode=""></image>
				</view>
			</view>
		</view>
		<uni-drawer ref="showRight" mode="left" :width="210">
			<view class="right-content">
				<view class="logo">
					<image src="../static/icons/find.png" mode=""></image>
					<text>转客萌</text>
				</view>
				<view class="lists">
					<view class="list" @click="closeDrawer()">
						<image src="../static/icons/find.png" mode=""></image>
						<text>首页</text>
					</view>
					<view class="list" @click="goPage('/pages/users/currency')">
						<image src="../static/icons/find.png" mode=""></image>
						<text>ZKB钱包</text>
					</view>
					<view class="list" @click="goPage('/pages/shares/share')">
						<image src="../static/icons/find.png" mode=""></image>
						<text>分享好友</text>
					</view>
					<view class="list" @click="goPage('/pages/users/teams')">
						<image src="../static/icons/find.png" mode=""></image>
						<text>收益团队</text>
					</view>
					<view class="list" @click="goPage('/pages/basic/problem')">
						<image src="../static/icons/find.png" mode=""></image>
						<text>常见问题</text>
					</view>
					<view class="list" @click="goPage('/pages/basic/white_paper')">
						<image src="../static/icons/find.png" mode=""></image>
						<text>白皮书</text>
					</view>
					<view class="list" @click="goPage('/pages/basic/user_age')">
						<image src="../static/icons/find.png" mode=""></image>
						<text>隐私协议</text>
					</view>
					<view class="list" @click="goPage('/pages/users/user')">
						<image src="../static/icons/find.png" mode=""></image>
						<text>个人资料</text>
					</view>
				</view>
			</view>
		</uni-drawer>
	</view>

</template>

<script>
	import {
		sumSql
	} from '../utils/sqlite.js'
	export default {
		data() {
			return {

			}
		},
		props: {
			isBack: {
				type: [Boolean, String],
				default: false
			},
			title:{
				type: [String],
				default: ''
			}
		},
		mounted() {

		},
		methods: {
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			goBack() {
				uni.navigateBack()
			},
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	.head-s{
		.top-view{
			height:var(--status-bar-height) ;
		}
		padding-top: 110upx;
		.head-top{
			position: fixed;
			top: 0;
			width: 100%;
			box-sizing: border-box;
			background-color: #F1F1F1;
			z-index: 999;
			.status_bar{
				height:var(--status-bar-height) ;
				width: 100%;
			}
		}
		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 110upx;
			border-bottom: 1upx solid #e8e6e9;
			padding-left: 30upx;
			padding-right: 30upx;
			
			.center {
				font-size: 30upx;
				font-weight: bold;
				color: #000000;
		
				.amount {
					font-size: 50upx;
					padding-right: 10upx;
				}
			}
			.title{
				font-size: 40upx;
				font-weight: bold;
				color: #000000;
			}
			.icon {
				display: flex;
		
				image {
					width: 60upx;
					height: 60upx;
				}
			}
		}
	}
	.right-content{
		padding-top: var(--status-bar-height);
		.logo{
			display: flex;
			flex-flow: column;
			align-items: center;
			border-bottom: 1upx solid #EEE;
			padding: 40upx 0;
			image{
				width: 120upx;
				height: 120upx;
				border-radius: 60upx;
			}
			text{
				padding-top: 10upx;
			}
		}
	}
	.lists{
		padding: 40upx;
		.list{
			margin-bottom: 40upx;
			display: flex;
			align-items: center;
			image{
				width: 70upx;
				height: 70upx;
			}
			text{
				padding-left: 40upx;
			}
		}
	}
	
</style>
